<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Personalities</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ng-container *ngIf="(gameService.player$ | async) as player">
    <div class="blank-slate" *ngIf="(player?.$personalitiesData?.personalities | keyvalue)?.length === 0">
      You have no personalities.
    </div>

    <ion-list>
      <ion-item *ngFor="let pers of player?.$personalitiesData?.personalities | keyvalue">
        <ion-checkbox slot="start" 
                      (click)="togglePersonality(pers.key)"
                      [(ngModel)]="player.$personalitiesData.activePersonalities[pers.key]"></ion-checkbox>

        <ion-label class="ion-text-wrap">
          <h3>{{ pers.key }}</h3>
          <p>{{ pers.value }}</p>
        </ion-label>
      </ion-item>
    </ion-list>
  </ng-container>
</ion-content>
